﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <link href="/style/home.css" rel="stylesheet" />
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <script src="/script/config.js"></script>
  <style>
    #table {
      text-align: center;
    }
    #table th{
      text-align: center;
    }
  </style>
</head>
<body>

    <div class="view-page">
        <!--标签切换器-being-->
        <ul class="nav nav-tabs">
            <li class="active"><a data-tab href="#tabContent1">首页轮播图</a></li>
            <li><a data-tab href="#tabContent2">特殊产品</a></li>
        </ul>
        <div class="tab-content">
            <!-- 分组图片浏览 -->
            <div class="tab-pane active" id="tabContent1">
                <div style="float:right;">
                    <button class="btn " type="button" data-refresh='thispage'><i class="icon icon-repeat"></i>刷新</button>
                    <button class="btn btn-success " type="button"  id="btn-img-upload">添加</button>
                    <button type="button" id="btn-search" class="btn btn-primary y-btn" onclick="SubmitBanner()">保存</button>
                </div>
                <div class="cards" id="bannerList"></div>
            </div>
            <div class="tab-pane" id="tabContent2">
                <div class="view-eidt-btns">
                    <a href="jsvascript:;" class="btn btn-sm" onclick="addOther(0)">
                        <i class="fa fa-plus"></i>添加
                    </a>
                    <!--<a href="javascript:;" class="btn btn-sm" data-btn-eidt="/views/mall/Product/productment/form.html?v=">
                        <i class="fa fa-edit"></i>编辑
                    </a>-->
                    <a id="del" href="javascript:;" class="btn btn-danger btn-sm" onclick="dltAll()">
                        <i class="fa fa-trash-o"></i>删除
                    </a>
                </div>
                <table id="table" class="table table-bordered table-hover" data-post="">
                    <thead>
                        <tr>
                            <th class="checkboxs">
                                <label class="checkbox-reset">
                                    <input type="checkbox" data-checked-table="all" />
                                </label>
                            </th>
                            <th>id</th>
                            <th>产品名称</th>
                            <th>排序</th>
                            <th>创建时间</th>
                            <th>是否引用</th>
                            <th>产品详情</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!--标签切换器-end-->
        <!--产品链接对话框-Begin-->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content" style="padding:20px;">
                    <h5>配置产品链接</h5>
                    <div class="input-control has-label-left" style="text-align: center;">
                        <input id="ProductLink"  value="#" type="text" class="form-control" placeholder="">
                        <label for="ProductLink" class="input-control-label-left">产品链接:</label>
                        <button type="button" class="btn btn-primary y-btn" style="margin-top:10px;" onclick="ConfirmLink()"> 确定 </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 产品链接对话框-End-->
    </div>
</body>
</html>
<script src="/script/plugins/upload/js/config.js"></script>
<script type="text/html" id="spPrds-table">
  {{each list spPrds}}
  <tr>
    <td class="checkboxs">
      <label class="checkbox-reset">
        <input type="checkbox" value="{{spPrds.Id}}" data-checked-table="single" />
      </label>
    </td>
    <td class="id">{{spPrds.Id}}</td>
    <td>{{spPrds.Title}}</td>
    <td>{{spPrds.SortId}}</td>
    <td>{{spPrds.CreateDate | time}}</td>
    <td>
      {{if spPrds.UseStatus==1}}启用{{else if spPrds.UseStatus==2}}不启用{{/if}}
    </td>
    <td><button type="button" class="btn btn-info" onclick="addOther(this)">查看产品详情</button></td>
    <td>
      <button type="button" class="btn btn-danger" onclick="dlt(this)">删除</button>
    </td>
  </tr>
  {{/each}}
</script>
<script>
  getHomeManage();
    $('img').lightbox();
    //上传轮播图片
    $("#btn-img-upload").click(function () {
        $.WebUploader({
            uploader: { //图片上传配置
                fileNumLimit: 1000024, // 验证文件总数量, 超出则不允许加入队列
                fileSingleSizeLimit: 1230000000, //验证单个文件大小是否超出限制,单位计算/b
                succee: function (rs) {
                    AddBanner(rs.Url,0)
                }
            }
        })
    });

    //监听弹出窗显示事件
    var openObj;//当前打开的对象
    $('#myModal').on('shown.zui.modal', function (e) {
        var obj = $(e.relatedTarget).parent().parent('a');
        openObj = obj;
        $("#ProductLink").val(obj.attr("data-url"));
    })

    //确定修改地址
    function ConfirmLink() {
        $(openObj).attr("data-url", $("#ProductLink").val());
        $('#myModal').modal('hide');
        $("#ProductLink").val("")
    }

    //保存轮播图
    function SubmitBanner() {
        var bannerObj = $("#bannerList a");
        var data = [];//内容
        bannerObj.each(function (i, item) {
            data.push({ "ProductLink": $(this).data("url"), "ProductPic": $(this).find("img").attr("src"), "SortId":$(this).find('#xh').val()});
        });
      var request = {
        Title: "轮播图",
        JsonContent: JSON.stringify(data),
        UseStatus: 1,
        SortId: 0,
        IsSlide: 1
      };
      keepImg(request)
    }

    //添加轮播图实例
    function AddBanner(url, length, Plink) {
        var objHtml = '<div class="carditem"><a class="card" href = "###" data-url="' + Plink + '"><img  data-group="image-group-1" data-toggle="lightbox" data-image="' + url +'" src="' + url+'" alt="" /><div class="card-actions"><button type="button" class="btn btn-mini  btn-success" data-toggle="modal" data-target="#myModal">产品链接</button> <button class="btn btn-mini btn-danger" type="button" onclick="DeleteBanner(this)">删除</button><label for="xh" style="height: 25px;margin-left: 5px;font-size: 10px;color:#333;">序号:<input id="xh" type="tel" value="' + length + '" style="width: 30px;border:1px solid #ddd;text-align: center;"/></label></div></a></div>';
        $("#bannerList").append(objHtml);
        $('img').lightbox();
    }

    //上传图片反馈地址保存
    function SaveUploadingPicLink(url) {
        $(openObj).find("img").attr("src", url);
    }

    //删除轮播图
    function DeleteBanner(item) {
        $(item).parents(".carditem").remove();
    }

    //获取首页列表
  function getHomeManage() {
    $.http.request('/homemanage/list',{},{
      pass:function(res){
        var spPrdsArr = [];
        for(var i=0; i<res.length; i++){
          if(res[i].IsSlide == 1){
            if(typeof res[i].JsonContent == "string"){
              var content = eval('(' + res[i].JsonContent + ')')
              for(var ii=0; ii<content.length; ii++){
                  if (content[ii] !== undefined && content[ii] !== '') {
                      AddBanner(content[ii].ProductPic, content[ii].SortId, content[ii].ProductLink);
                }
              }
            }
          }
          if(res[i].IsSlide == 2){
            spPrdsArr.push(res[i])
          }
        }
        $("#table>tbody").append(template("spPrds-table", {
          list: spPrdsArr
        }));
      },
      error:function(err){
        console.log(err)
      }
    })
  }

    // 保存图片
  function keepImg(rquest){
    $.http.request('/homemanage/insert',rquest,{
      pass:function (res) {
        getHomeManage();
        window.location.reload()
      },
      error:function (err) {
        console.log(err)
      }
    })
  }

  /* --------------------------------------- 特殊产品-------------------------------------------- */

  // 删除一个特殊产品
  function dlt(item) {
    $(item).parents('tr').remove();
    var delId = {Ids:[$(item).parent('td').siblings('.id').text()]};
    delet(delId)
  }

  // 删除所有选择特殊产品
  function dltAll() {
    var delIdArr = [];
    $('#table tbody tr').each(function (i,el) {
      if($(el).hasClass('active')){
        delIdArr.push($(el).find('.checkboxs input').val())
        $(el).remove();
      }
    })
    if(delIdArr.length>0){
      var dltArr = {
        Ids:delIdArr
      };
      delet(dltArr);
    }
  }

  // 删除特殊产品
  function delet(request){
    $.http.request('/homemanage/del',request,{
      pass:function (res) {
        console.log(res)
      },
      error:function (err) {
        console.log(err)
      }
    })
  }

  //添加特殊产品
  function addOther(id){
    if(id==0){
      layer.open({
        type: 2,
        title: '添加特殊商品',
        shadeClose: true,
        shade: 0.3,
        area: ['95%', '90%'],
        scrollbar: false,
        content: './addspprd.html',
        end: function (){
          window.location.reload()
        }
      });
    }else{
      layer.open({
        type: 2,
        title: '产品详情',
        shadeClose: true,
        shade: 0.3,
        area: ['80%', '60%'],
        scrollbar: false,
        content: './seespprd.html',
        success: function (layero, index) {
          var body = layer.getChildFrame('body', index);
          var iframeWin = window[layero.find('iframe')[0]['name']];
          getOneOther($(id).parent().siblings('.id').text(),body.find('#table tbody'))
        }
      });
    }
  }

  // 根据id获取单个特殊件产品
  function getOneOther(id,el) {
    $.http.request('/homemanage/find',{Id:id},{
      pass:function (res) {
        if(typeof res.JsonContent == 'string'){
          var newArr = eval('(' + res.JsonContent + ')');
          el.append(template("seespprd-table", {
            list: newArr
          }));
        }
      },
      error:function (err) {
        console.log(err)
      }
    })
  }

  template.defaults.imports.time = function (time) {
    return time.replace('T',' ')
  }
</script>
<script type="text/html" id="seespprd-table">
  {{each list newArr}}
  <tr>
    <td><img src="{{newArr.ProductPic}}" alt=""/></td>
    <td>{{newArr.ProductLink}}</td>
    <td>{{newArr.SortId}}</td>
  </tr>
  {{/each}}
</script>